<template>
<div> 
    <el-form-item label="选择已有数据源">
        <div style="display:flex">
          <el-select v-model="database.dataSourceId" placeholder="请选择">
            <el-option
              v-for="item in sourseList"
              :key="item.id"
              :label="item.linkName"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" @click="addSourse" style="margin-left:10px">新建</el-button>
        </div>
        
    </el-form-item>

    <el-form-item label="">
      <el-button type="primary" @click="linkDB">连接数据库</el-button>
    </el-form-item>

    <el-form-item label="刷新时间">
      <el-input-number
        v-model="apiTimeout" controls-position="right" :step="1000" @change="changeTimeout"
      ></el-input-number>
    </el-form-item>
  
    <el-dialog title="数据库配置" v-if="dbVisble" :visible.sync="dbVisble" width="1000px" append-to-body>

        <el-tabs type="border-card">
          
          <el-tab-pane label="自定义sql">

            <custom-sql :dataBase="database" :staticValue="chartData.chartOption.staticDataValue" @changeDataBase="changeDataBase"></custom-sql>
          </el-tab-pane>

          <el-tab-pane label="数据分析配置">
            <threed-base v-if="dataBaseType=='three'" :costomData="chartData" :taBleOptions="tableOptions" :dataBase="database" @changeDataBase="changeDataBase"></threed-base>
            <twod-base v-if="dataBaseType=='two'" :costomData="chartData" :taBleOptions="tableOptions" :dataBase="database" @changeDataBase="changeDataBase"></twod-base>
            <fourd-base v-if="dataBaseType=='four'" :costomData="chartData" :taBleOptions="tableOptions" :dataBase="database" @changeDataBase="changeDataBase"></fourd-base>
            <table-base v-if="dataBaseType=='table'" :costomData="chartData" :taBleOptions="tableOptions" :dataBase="database" @changeDataBase="changeDataBase"></table-base>

          </el-tab-pane>

          
        </el-tabs>
      
        
    
    </el-dialog>
    
    <!-- 添加数据源配置对话框 -->
    <el-dialog title="新增数据源" v-if="sourseOpen" :visible.sync="sourseOpen" width="520px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="数据库类型" prop="databaseType" label-width="100px">
          <!-- <el-input v-model="form.databaseType" placeholder="请输入数据库类型" /> -->
          <el-select v-model="form.databaseType" placeholder="请选择数据库类型">
            <el-option label="MySQL" value="mysql"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="连接名称" prop="linkName" label-width="100px">
          <el-input v-model="form.linkName" placeholder="请输入链接名称" />
        </el-form-item>
        <el-form-item label="IP地址" prop="ipAddress" label-width="100px">
          <el-input v-model="form.ipAddress" placeholder="请输入IP地址" />
        </el-form-item>
        <el-form-item label="端口" prop="port" label-width="100px">
          <el-input v-model="form.port" placeholder="请输入端口号"/>
        </el-form-item>
        <el-form-item label="数据库名称" prop="databaseName" label-width="100px">
          <el-input v-model="form.databaseName" placeholder="请输入数据库名称" />
        </el-form-item>
        <el-form-item label="用户名" prop="username" label-width="100px">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="100px">
          <el-input type="password" v-model="form.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="备注" label-width="100px">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</div>
</template>

<script>
import { getAllTable} from '@/api/tool/datav/chartDB'
import { listSourse, getSourse, addSourse } from '@/api/tool/datav/sourse'
import ThreedBase from '@/views/tool/datav/components/config/DataConfig/ThreedBase'
import TwodBase from '@/views/tool/datav/components/config/DataConfig/TwodBase'
import FourdBase from '@/views/tool/datav/components/config/DataConfig/FourdBase'
import TableBase from '@/views/tool/datav/components/config/DataConfig/TableBase'
import CustomSql from '@/views/tool/datav/components/config/DataConfig/CustomSql'

export default {
  props:["costomData","baseType"],
  components:{
    ThreedBase,
    TwodBase,
    FourdBase,
    TableBase,
    CustomSql
  },
  data(){

    return{
      dataBaseType:this.baseType,
      chartData:this.costomData,
      database: {
        type: this.costomData.chartOption.database.type,
        ipAdress: this.costomData.chartOption.database.ipAdress,
        port: this.costomData.chartOption.database.port,
        baseName: this.costomData.chartOption.database.baseName,
        username: this.costomData.chartOption.database.username,
        password: this.costomData.chartOption.database.password,
        tableName: this.costomData.chartOption.database.tableName,
        dataSourceId : this.costomData.chartOption.database.dataSourceId,
        sqlType: this.costomData.chartOption.database.sqlType,
        fieldName: '',
        executeSql: this.costomData.chartOption.database.sqlType == 'custom' ? this.costomData.chartOption.database.executeSql:'',
        chartStucture: {
          legend:[],
          coordinate:[],
          statisticsType: ''
        }
      },
      //选择目标数据表集合
      tableOptions: [],
      dbVisble: false,
      // loading: true,
      sourseList:[],
       // 表单参数
      form: {},
      // 表单校验
      rules: {
        databaseType: [
          { required: true, message: "数据库类型不能为空", trigger: "blur" }
        ],
        ipAddress: [
          { required: true, message: "ip地址不能为空", trigger: "blur" }
        ],
        port: [
          { required: true, message: "端口号不能为空", trigger: "blur" }
        ],
        databaseName: [
          { required: true, message: "数据库名称不能为空", trigger: "blur" }
        ],
        linkName: [
          { required: true, message: "链接名称不能为空", trigger: "blur" }
        ],
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
      },
      sourseOpen: false,
      apiTimeout: this.costomData.chartOption.timeout, //刷新时间
    }
  },
  watch: {

  },
  mounted() {
    this.getSourseList();
  },
  methods:{
    DBConn() {
      
  
      //连接数据库
      getAllTable(this.database).then(response => {
          if (response.code == 200) {
              //alert("连接数据库成功");
              this.$message({
                  message: '连接数据库成功',
                  type: 'success'
              });
              this.tableOptions = response.data;
              this.loading = false;
              this.dbVisble = true;
              
          } else {
              this.$message.error('连接数据库失败');
          }
      });

    },
    
    changeDataBase(val){
      this.dbVisble = false;
      this.$emit("changeDataBase", val);
    },
    //获取数据源列表
    getSourseList(){
        listSourse().then((response) => {      
          this.sourseList = response.rows;
        });
    },
    //连接数据库
    linkDB(){
      //必须选择数据源
      if(this.database.dataSourceId == undefined || this.database.dataSourceId == ''){
       
       this.$message.error('请选择数据源');
       return false;
      
      }else{
        this.loading = true;
        getSourse(this.database.dataSourceId).then((response) => {

          //重新赋值
          this.database.type = response.data.databaseType;
          this.database.ipAdress = response.data.ipAddress ;
          this.database.port = response.data.port;
          this.database.baseName = response.data.databaseName;
          this.database.username = response.data.username;
          this.database.password = response.data.password;
          
          if (response.code == 200) {
      
            this.DBConn()
          }else{
            this.$message.error('连接数据库失败');
          }
                   
        });
      }
      
    },
    addSourse(){
       this.reset();
       this.sourseOpen = true;
    },
     // 取消按钮
    cancel() {
      this.sourseOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }
      this.form = {
        id: undefined,
        databaseType: undefined,
        ipAddress: undefined,
        port: undefined,
        databaseName: undefined,
        linkName: undefined,
        username: undefined,
        password: undefined,
        remark: undefined,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
            addSourse(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.sourseOpen = false;
                this.getSourseList();
              } else {
                this.msgError(response.msg);
              }
            });
          
        }
      });
    },
    changeTimeout() {
      this.$emit("changeTimeout", { type: "timeout", arr: this.apiTimeout });
    }
  }
}
</script>